import React, { useState,useRef,useEffect } from 'react';  
import { Steps, Card, Row, Col,Form,Button,Input,Modal,Select,List,Table, message,Upload,Tooltip,Tabs} from 'antd';
import { UploadOutlined } from '@ant-design/icons';   
import MemoTable from '@/components/MemoTable';
import { useTranslation } from 'react-i18next';
import { addRemark,updateRemark,delRemark} from "@/api/modules/remarks";
import { listIngredient,del,add,edit,getIngredientInfoById,delReport,delScreen,addReport,editReport,addScreen,editScreen,importReport} from "@/api/modules/literdata";
import { getIngredientSubjectTestById,comparisonIngredient,importIngredientInfoCheck,importIngredientInfoSave} from "@/api/modules/litermark";
import { list} from "@/api/modules/inci";
import { law_incibyId} from "@/api/modules/inci";
import { useNavigate  } from 'react-router-dom';
import { upload } from "@/api/modules/common";
import { Link as RouterLink } from 'react-router-dom'
import useCurrentPage from '@/store/modules/currentPage'
import useHistoryTags, {HistoryTag} from '@/store/modules/historyTags'
import useDynamicCache from '@/store/modules/dynamicCache'

const { Step } = Steps;  
const { Option } = Select;  
const { TabPane } = Tabs; 

const viewsearchList = () => {  
  const { t } = useTranslation()
  const navigate = useNavigate();
  const currentPage = useCurrentPage()
  const [currentStep, setCurrentStep] = useState(0);  
  const [isModalVisible, setIsModalVisible] = useState(false); 
  const [Title, setTitle] = useState("")  
  const [form] = Form.useForm();  
  const [form2] = Form.useForm();  
  const [fileList, setFileList] = useState([]); 
  const [filename, setFilename] = useState("");
  const [reportlist,setReportlist] = useState([]);
  const [screenlist,setScreenlist] = useState([]);
  const [remarkslist,setRemarkslist] = useState([]);
  const [isView, SetisView] = useState(false)
  const [onReloadNum, setReloadNum] = useState(null); 

  const [tabSubjectLevel1,setTabSubjectLevel1] = useState([])
  const [formId,setFormId]  = useState(null)
  const [zyNo,setZYNo]  = useState(null)
  const [formReport] = Form.useForm();  
  const [reportvisible, setReportVisible] = useState(false);  
  const [formFulu] = Form.useForm();  
  const [fuluvisible, setFuluVisible] = useState(false);
  //id
  const [zyLawInciLists,setzyLawInciLists] = useState([])
  const [inciRisksubstanceList,setinciRisksubstanceList] = useState([])  
  const [zySafetyRmInciList,setzySafetyRmInciList] = useState([])
  //ingredient
  const [newingredientList,setnewingredientList] = useState([])
  const [newreportList,setnewreportList] = useState([])  
  const [newremarkList,setnewremarkList] = useState([])
  const [newtabData,setnewTabData] = useState([]);
  const [texoData,settexoData] = useState([]);
  const [childrenData,setchildrenData] = useState([]);
 // 创建refs来引用Card元素  
 const cardRef1 = useRef(null);  
 const cardRef2 = useRef(null);  
 const cardRef3 = useRef(null);  
 const cardRef4 = useRef(null); 
 const cardRef5 = useRef(null);  
 const cardRef6 = useRef(null);  
 const cardRef7 = useRef(null);  
 const cardRef8 = useRef(null); 
 const cardRef9 = useRef(null); 
  const maodianlist = [  
    '化妆品安全技术规范',  
    'Inredient CIR 信息汇总',    
    '毒理学终点',  
    '2021 IECIC',
    'Ingredient风险物质',
    '儿童配方设计原则',
    'Ingredient文献',
    'Ingredient附录',
    'Ingredient所在原料列表',
  ];  

  const getQueryVariable = (variable) =>{
    const query = window.location.search.substring(1);
    const vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
  }
  
  // 滚动到指定Card的函数  
  const scrollToCard = (cardRef) => {  
    if (cardRef && cardRef.current) {  
      // 滚动到目标Card的顶部位置  
      window.scrollTo({  
        top: cardRef.current.offsetTop - 70, // 减去一些值以考虑导航栏或顶部其他元素的高度  
        behavior: 'smooth', // 平滑滚动  
      });  
    }  
  };  

  // Steps的onChange事件处理函数  
  const handleStepChange = (nextStep) => {  
    setCurrentStep(nextStep);  
    // 根据步骤索引滚动到对应的Card  
    switch (nextStep) {  
      case 0:  
        scrollToCard(cardRef1);  
        break;  
      case 1:  
        scrollToCard(cardRef2);  
        break;  
      case 2:  
        scrollToCard(cardRef3);  
        break;  
      case 3:  
        scrollToCard(cardRef4);  
        break;  
      case 4:  
        scrollToCard(cardRef5);  
        break;  
      case 5:  
        scrollToCard(cardRef6);  
        break;  
      case 6:  
        scrollToCard(cardRef7);  
        break;  
      case 7:  
        scrollToCard(cardRef8);  
        break; 
      case 8:  
        scrollToCard(cardRef9);  
        break; 
      default:  
        break;  
    }  
  };  

  const columns: any = [
    {
      title: t('tspec2015.annex'),
      dataIndex: ['incigroup','annex'],
      key: 'incigroup.annex',
      width: 100,
      fixed:'left',
    },
    {
      title: t('tspec2015.serial'),
      dataIndex: ['incigroup','serial'],
      key: 'incigroup.serial',
      width: 100,
      ellipsis: {
        showTitle: false,
      },
      render: (serial) => (
        <Tooltip placement="topLeft" title={serial}>
          {serial}
        </Tooltip>
      ),
    },
    {
        title: t('tspec2015.chemicalNameCn'),
        dataIndex: ['incigroup','chemicalNameCn'],
        key: 'incigroup.chemicalNameCn',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (chemicalNameCn) => (
          <Tooltip placement="topLeft" title={chemicalNameCn}>
            {chemicalNameCn}
          </Tooltip>
        ),
      },
      {
        title: t('tspec2015.chemicalNameEn'),
        dataIndex: ['incigroup','chemicalNameEn'],
        key: 'incigroup.chemicalNameEn',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (chemicalNameEn) => (
          <Tooltip placement="topLeft" title={chemicalNameEn}>
            {chemicalNameEn}
          </Tooltip>
        ),
      },
      {
        title: t('tspec2015.productTypeBodyPart'),
        dataIndex: ['incigroup','productTypeBodyPart'],
        key: 'incigroup.productTypeBodyPart',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (productTypeBodyPart) => (
          <Tooltip placement="topLeft" title={productTypeBodyPart}>
            {productTypeBodyPart}
          </Tooltip>
        ),
      },
      {
        title: t('tspec2015.maxConcentration'),
        dataIndex: ['incigroup','maxConcentration'],
        key: 'incigroup.maxConcentration',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (maxConcentration) => (
          <Tooltip placement="topLeft" title={maxConcentration}>
            {maxConcentration}
          </Tooltip>
        ),
      },
      {
        title: t('tspec2015.other'),
        dataIndex: ['incigroup','other'],
        key: 'incigroup.other',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (other) => (
          <Tooltip placement="topLeft" title={other}>
            {other}
          </Tooltip>
        ),
      },
      {
        title: t('tspec2015.wordConditionUseWarning'),
        dataIndex: ['incigroup','wordConditionUseWarning'],
        key: 'incigroup.wordConditionUseWarning',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (wordConditionUseWarning) => (
          <Tooltip placement="topLeft" title={wordConditionUseWarning}>
            {wordConditionUseWarning}
          </Tooltip>
        ),
      },
      {
        title: t('tspec2015.color'),
        dataIndex: ['incigroup','color'],
        key: 'incigroup.color',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (color) => (
          <Tooltip placement="topLeft" title={color}>
            {color}
          </Tooltip>
        ),
      },
      {
        title: t('tspec2015.annexDetailDesc'),
        dataIndex: ['incigroup','annexDetailDesc'],
        key: 'incigroup.annexDetailDesc',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (annexDetailDesc) => (
          <Tooltip placement="topLeft" title={annexDetailDesc}>
            {annexDetailDesc}
          </Tooltip>
        ),
      },
  ];

  const columnsRM: any = [
    {
      title: t('sarm.rmNumber'),
      dataIndex: ['zySafetyRm','rmNumber'],
      key: 'zySafetyRm.rmNumber',
      width: 100,
      fixed:'left',
    },
    {
      title: t('sarm.rmName'),
      dataIndex: ['zySafetyRm','rmName'],
      key: 'zySafetyRm.rmName',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (rmName) => (
        <Tooltip placement="topLeft" title={rmName}>
          {rmName}
        </Tooltip>
      ),
    },
    {
        title: t('sarm.commercialName'),
        dataIndex: ['zySafetyRm','commercialName'],
        key: 'zySafetyRm.commercialName',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (commercialName) => (
          <Tooltip placement="topLeft" title={commercialName}>
            {commercialName}
          </Tooltip>
        ),
      },
      {
        title: 'INCI在原料中百分比(%)',
        dataIndex: 'percentage',
        key: 'percentage',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (percentage) => (
          <Tooltip placement="topLeft" title={percentage}>
            {percentage}
          </Tooltip>
        ),
      },
      {
        title: t('sarm.singlePl'),
        dataIndex: ['zySafetyRm','singlePl'],
        key: 'zySafetyRm.singlePl',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (singlePl) => (
          <Tooltip placement="topLeft" title={singlePl}>
            {singlePl}
          </Tooltip>
        ),
      },
      {
        title: t('sarm.manufactureName'),
        dataIndex: ['zySafetyRm','manufactureName'],
        key: 'zySafetyRm.manufactureName',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (manufactureName) => (
          <Tooltip placement="topLeft" title={manufactureName}>
            {manufactureName}
          </Tooltip>
        ),
      },
      {
        title: t('sarm.distributorName'),
        dataIndex: ['zySafetyRm','distributorName'],
        key: 'zySafetyRm.distributorName',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (distributorName) => (
          <Tooltip placement="topLeft" title={distributorName}>
            {distributorName}
          </Tooltip>
        ),
      },
      {
        title: t('sarm.function1'),
        dataIndex: ['zySafetyRm','function1'],
        key: 'zySafetyRm.function1',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (function1) => (
          <Tooltip placement="topLeft" title={function1}>
            {function1}
          </Tooltip>
        ),
      },
      {
        title: t('VendorType.createBy'),
        dataIndex: ['zySafetyRm','createBy'],
        key: 'zySafetyRm.createBy',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (createBy) => (
          <Tooltip placement="topLeft" title={createBy}>
            {createBy}
          </Tooltip>
        ),
      },
      {
        title: t('VendorType.createOn'),
        dataIndex: ['zySafetyRm','createOn'],
        key: 'zySafetyRm.createOn',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (createOn) => (
          <Tooltip placement="topLeft" title={createOn}>
            {createOn}
          </Tooltip>
        ),
      },
      {
        title: t('VendorType.updateBy'),
        dataIndex: 'updateBy',
        key: 'updateBy',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (updateBy) => (
          <Tooltip placement="topLeft" title={updateBy}>
            {updateBy}
          </Tooltip>
        ),
      },
      {
        title: t('VendorType.updateOn'),
        dataIndex: 'updateOn',
        key: 'updateOn',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (updateOn) => (
          <Tooltip placement="topLeft" title={updateOn}>
            {updateOn}
          </Tooltip>
        ),
      },
  ];

  const columnsRisk: any = [
    {
      title: t('inci.riskEn'),
      dataIndex: ['riskSubstance','riskEn'],
      key: 'riskSubstance.riskEn',
      width: 100,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (riskEn) => (
        <Tooltip placement="topLeft" title={riskEn}>
          {riskEn}
        </Tooltip>
      ),
    },
    {
      title: t('inci.riskCn'),
      dataIndex: ['riskSubstance','riskCn'],
      key: 'riskSubstance.riskCn',
      width: 100,
      ellipsis: {
        showTitle: false,
      },
      render: (riskCn) => (
        <Tooltip placement="topLeft" title={riskCn}>
          {riskCn}
        </Tooltip>
      ),
    },
    {
        title: t('risksubstance.type'),
        dataIndex: ['riskSubstance','type'],
        key: 'riskSubstance.type',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (type) => (
          <Tooltip placement="topLeft" title={type}>
            {type}
          </Tooltip>
        ),
      },
      {
        title: t('risksubstance.maximum'),
        dataIndex: ['riskSubstance','maximum'],
        key: 'riskSubstance.maximum',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (maximum) => (
          <Tooltip placement="topLeft" title={maximum}>
            {maximum}
          </Tooltip>
        ),
      },
      {
        title: t('risksubstance.testMethod'),
        dataIndex: ['riskSubstance','testMethod'],
        key: 'riskSubstance.testMethod',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (testMethod) => (
          <Tooltip placement="topLeft" title={testMethod}>
            {testMethod}
          </Tooltip>
        ),
      },
      {
        title: t('risksubstance.legalSource'),
        dataIndex: ['riskSubstance','legalSource'],
        key: 'riskSubstance.legalSource',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (legalSource) => (
          <Tooltip placement="topLeft" title={legalSource}>
            {legalSource}
          </Tooltip>
        ),
      },
      {
        title: t('risksubstance.comment'),
        dataIndex: ['riskSubstance','comment'],
        key: 'riskSubstance.comment',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (comment) => (
          <Tooltip placement="topLeft" title={comment}>
            {comment}
          </Tooltip>
        ),
      },
      {
        title: t('risksubstance.remarkCn'),
        dataIndex: ['riskSubstance','remarkCn'],
        key: 'riskSubstance.remarkCn',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (remarkCn) => (
          <Tooltip placement="topLeft" title={remarkCn}>
            {remarkCn}
          </Tooltip>
        ),
      },
      {
        title: t('risksubstance.diagnosticCn'),
        dataIndex: ['riskSubstance','diagnosticCn'],
        key: 'riskSubstance.diagnosticCn',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (diagnosticCn) => (
          <Tooltip placement="topLeft" title={diagnosticCn}>
            {diagnosticCn}
          </Tooltip>
        ),
      },
      {
        title: t('risksubstance.diagnosticEn'),
        dataIndex: ['riskSubstance','diagnosticEn'],
        key: 'riskSubstance.diagnosticEn',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (diagnosticEn) => (
          <Tooltip placement="topLeft" title={diagnosticEn}>
            {diagnosticEn}
          </Tooltip>
        ),
      },
      {
        title: t('risksubstance.dataReference'),
        dataIndex: ['riskSubstance','dateReference'],
        key: 'riskSubstance.dateReference',
        width:120,
        ellipsis: {
          showTitle: false,
        },
        render: (dateReference) => (
          <Tooltip placement="topLeft" title={dateReference}>
            {dateReference}
          </Tooltip>
        ),
      },
  ];

  const getFileLink = (filename) =>{  
    // 这里返回一个文件链接的字符串，你可以根据需要进行修改  
    return `/res-dir/Articel/Original/${filename}`;  
  }  

  const columnsIngredientCIR: any = [
    {
      title: t('Ingredient'),
      dataIndex: 'ingredient',
      key: 'ingredient',
      width: 100,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (ingredient) => (
        <Tooltip placement="topLeft" title={ingredient}>
          {ingredient}
        </Tooltip>
      ),
    },
    {
        title: t('ing.lawInciSerial'),
        dataIndex: 'lawInciSerial',
        key: 'lawInciSerial',
        width: 100,
        fixed:'left',
        ellipsis: {
          showTitle: false,
        },
        render: (lawInciSerial) => (
          <Tooltip placement="topLeft" title={lawInciSerial}>
            {lawInciSerial}
          </Tooltip>
        ),
      },
      {
        title: t('searchDetail.MaxRinseoffConcentration'),
        dataIndex: '最大淋洗类浓度',
        key: '最大淋洗类浓度',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (最大淋洗类浓度) => (
          <Tooltip placement="topLeft" title={最大淋洗类浓度}>
            {最大淋洗类浓度}
          </Tooltip>
        ),
      },
      {
        title: t('searchDetail.MaxLeaveonConcentration'),
        dataIndex: '最大驻留类浓度',
        key: '最大驻留类浓度',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (最大驻留类浓度) => (
          <Tooltip placement="topLeft" title={最大驻留类浓度}>
            {最大驻留类浓度}
          </Tooltip>
        ),
      },
      {
        title: t('ing.conclusionCn'),
        dataIndex: 'conclusionCn',
        key: 'conclusionCn',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (conclusionCn) => (
          <Tooltip placement="topLeft" title={conclusionCn}>
            {conclusionCn}
          </Tooltip>
        ),
      },
      {
        title: t('ing.conclusion'),
        dataIndex: 'conclusion',
        key: 'conclusion',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (conclusion) => (
          <Tooltip placement="topLeft" title={conclusion}>
            {conclusion}
          </Tooltip>
        ),
      },
      {
        title: t('ing.finding'),
        dataIndex: 'finding',
        key: 'finding',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (finding) => (
          <Tooltip placement="topLeft" title={finding}>
            {finding}
          </Tooltip>
        ),
      },
      {
        title: t('ing.description'),
        dataIndex: 'description',
        key: 'description',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (description) => (
          <Tooltip placement="topLeft" title={description}>
            {description}
          </Tooltip>
        ),
      },
      {
        title: t('ing.citation'),
        dataIndex: 'citation',
        key: 'citation',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (citation) => (
          <Tooltip placement="topLeft" title={citation}>
            {citation}
          </Tooltip>
        ),
      },
      {
        title: t('ing.max3yearLeaveon'),
        dataIndex: 'max3yearLeaveon',
        key: 'max3yearLeaveon',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (max3yearLeaveon) => (
          <Tooltip placement="topLeft" title={max3yearLeaveon}>
            {max3yearLeaveon}
          </Tooltip>
        ),
      },
      {
        title: t('ing.max3yearRinseoff'),
        dataIndex: 'max3yearRinseoff',
        key: 'max3yearRinseoff',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (max3yearRinseoff) => (
          <Tooltip placement="topLeft" title={max3yearRinseoff}>
            {max3yearRinseoff}
          </Tooltip>
        ),
      },
      {
        title: t('ing.safetyConclusion'),
        dataIndex: 'safetyConclusion',
        key: 'safetyConclusion',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (safetyConclusion) => (
          <Tooltip placement="topLeft" title={safetyConclusion}>
            {safetyConclusion}
          </Tooltip>
        ),
      },
      {
        title: t('ing.updateBy'),
        dataIndex: 'updateBy',
        key: 'updateBy',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (updateBy) => (
          <Tooltip placement="topLeft" title={updateBy}>
            {updateBy}
          </Tooltip>
        ),
      },
      {
        title: t('ing.updateOn'),
        dataIndex: 'updateOn',
        key: 'updateOn',
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render: (updateOn) => (
          <Tooltip placement="topLeft" title={updateOn}>
            {updateOn}
          </Tooltip>
        ),
      },
      {
        title: t('ing.OriginalFile'),
        dataIndex: 'reports',
        key: 'reports',
        width: 100,
        render: (_, record) => (  
            <div style={{ display: 'grid' }}>  
        {record.reports.map((item, index) => (  
          <Tooltip  
            key={index}  
            title={item.filename}  
            placement="top"  
          >  
            <RouterLink to={getFileLink(item.filename)} target="_blank">  
              {item.filename}  
            </RouterLink>  
          </Tooltip>  
        ))}  
      </div>   
          ), 
      },
  ];

  const columnsReport: any = [
    {
      title: t('ing.fileName'),
      dataIndex: 'fileName',
      key: 'filename',
      width: 100,
      fixed:'left',
      render: (text, record) => (  
        <>  
            {/* <span  onClick={() => window.open('/res-dir/Articel/Screen/' + item.filename, '_blank')}>{record.filename}</span> */}
            <a href={record.filename?('/res-dir/Articel/Original/'+record.filename):''} target="_blank" className="buttonText">{record.filename}</a>
        </>  
      ), 
    },
    {
      title: t('ing.citationCIR'),
      dataIndex: 'dateReference',
      width: 100,
      key: 'dateReference',
      ellipsis: {
        showTitle: false,
      },
      render: (dateReference) => (
        <Tooltip placement="topLeft" title={dateReference}>
          {dateReference}
        </Tooltip>
      ),
    },
    {
      title: t('ing.citationLiterature'),
      dataIndex: 'reference',
      width: 120,
      key: 'reference',
      ellipsis: {
        showTitle: false,
      },
      render: (reference) => (
        <Tooltip placement="topLeft" title={reference}>
          {reference}
        </Tooltip>
      ),
    },
    {
      title: t('ing.fullReference'),
      dataIndex: 'fullReference',
      width: 120,
      key: 'fullReference',
      ellipsis: {
        showTitle: false,
      },
      render: (fullReference) => (
        <Tooltip placement="topLeft" title={fullReference}>
          {fullReference}
        </Tooltip>
      ),
    },
    {
      title: t('ing.combineReference'),
      dataIndex: 'combineReference',
      key: 'combineReference',
      width:120,
      ellipsis: {
        showTitle: false,
      },
      render: (combineReference) => (
        <Tooltip placement="topLeft" title={combineReference}>
          {combineReference}
        </Tooltip>
      ),
    },
    {
      title: t('status'),
      dataIndex: 'status',
      key: 'status',
      ellipsis: {
        showTitle: false,
      },
      render: (status) => (
        <Tooltip placement="topLeft" title={status}>
          {status}
        </Tooltip>
      ),
    },
    {
      title: t('ing.decisionRead'),
      dataIndex: 'decisionRead',
      key: 'decisionRead',
      width:120,
      ellipsis: {
        showTitle: false,
      },
      render: (decisionRead) => (
        <Tooltip placement="topLeft" title={decisionRead}>
          {decisionRead}
        </Tooltip>
      ),
    },
    {
      title: t('ing.origin'),
      dataIndex: 'origin',
      key: 'origin',
      ellipsis: {
        showTitle: false,
      },
      render: (origin) => (
        <Tooltip placement="topLeft" title={origin}>
          {origin}
        </Tooltip>
      ),
    },
  ];

  const columnsRemark: any = [
    {
      title: t('fulu'),
      dataIndex: 'fulu',
      key: 'fulu',
      width: 130,
      fixed:'left',
      render: (text, record) => (  
        <>  
            <span>{record.remark}</span>
        </>  
      ), 
    },
    {
      title: t('status'),
      dataIndex: 'status',
      key: 'status',
      width: 130,
    },
    {
      title: t('ing.fileName'),
      dataIndex: 'filename',
      key: 'filename',
    },
    
  ];

  const columns2: any = [
    {  
        title: t('searchDetail.ToxicologyEndpointSub'), // 国际化标题  
        dataIndex: ['zySafetySubjectDef','subjectLevel2Cn'], // 假设这是数据中的键  
        key: 'zySafetySubjectDef.subjectLevel2Cn',  
        fixed: 'left',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '毒理学终点') {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
      },  
      {  
        title: t('value'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','resultCn'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.resultCn',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '毒理学终点' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
      }, 
      {  
        title: t('unit'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','unit'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.unit',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '毒理学终点' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
      }, 
      {  
        title: t('link'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','link'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.link',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '毒理学终点' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        }, 
    },
        {  
            title: t('reportView'), // 国际化标题  
            dataIndex: ['zySafetyIngredientSubjectTestResult','reference'], // 假设这是数据中的键  
            key: 'zySafetyIngredientSubjectTestResult.reference',  
            minWidth: 80,  
            ellipsis: true, // 显示超出部分的 tooltip  
            render: (text, record) => {  
              if (record.zySafetySubjectDef.subjectLevel1Cn === '毒理学终点' && record.zySafetyIngredientSubjectTestResult !==null) {  
                return text;  
              }  
              return null; // 或者返回一个空字符串 ''  
            },  
      }, 
      {  
        title: t('fulu'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','comment'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.comment',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '毒理学终点' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
     }, 
     {  
        title: t('remark'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','remark'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.remark',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '毒理学终点' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
     }, 
      // ... 其他列定义 ...  
  ];

  const columnsChildren: any = [
    {  
        title: t('searchDetail.ChildrenFormulaDesignPrincipleSub'), // 国际化标题  
        dataIndex: ['zySafetySubjectDef','subjectLevel2Cn'], // 假设这是数据中的键  
        key: 'zySafetySubjectDef.subjectLevel2Cn',  
        fixed: 'left',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '法规') {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
      },  
      {  
        title: t('value'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','resultCn'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.resultCn',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '法规' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
      }, 
      {  
        title: t('unit'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','unit'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.unit',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '法规' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
      }, 
      {  
        title: t('link'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','link'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.link',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '法规' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        }, 
    },
        {  
            title: t('reportView'), // 国际化标题  
            dataIndex: ['zySafetyIngredientSubjectTestResult','reference'], // 假设这是数据中的键  
            key: 'zySafetyIngredientSubjectTestResult.reference',  
            minWidth: 80,  
            ellipsis: true, // 显示超出部分的 tooltip  
            render: (text, record) => {  
              if (record.zySafetySubjectDef.subjectLevel1Cn === '法规' && record.zySafetyIngredientSubjectTestResult !==null) {  
                return text;  
              }  
              return null; // 或者返回一个空字符串 ''  
            },  
      }, 
      {  
        title: t('fulu'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','comment'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.comment',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '法规' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
     }, 
     {  
        title: t('remark'), // 国际化标题  
        dataIndex: ['zySafetyIngredientSubjectTestResult','remark'], // 假设这是数据中的键  
        key: 'zySafetyIngredientSubjectTestResult.remark',  
        minWidth: 80,  
        ellipsis: true, // 显示超出部分的 tooltip  
        render: (text, record) => {  
          if (record.zySafetySubjectDef.subjectLevel1Cn === '法规' && record.zySafetyIngredientSubjectTestResult !==null) {  
            return text;  
          }  
          return null; // 或者返回一个空字符串 ''  
        },  
     }, 
      // ... 其他列定义 ...  
  ];

    


   // 初始化数据  
   useEffect(() => {  
    getData() 
  }, []);  

  const getData = async () => {
    const id  =  getQueryVariable("id")
    const ingredientIdnew = getQueryVariable("ingredientId")
    console.log(ingredientIdnew,'ingredientId')
    if(id == 'null' ||id == "" || id ==undefined || id ==null){
    //
        
    }else{
        setFormId(id)
        law_incibyId(id).then(res=>{
            const data = res.data.data
            form.setFieldsValue(res.data.data)
            setzyLawInciLists(data.zyLawInciLists)
            setinciRisksubstanceList(data.inciRisksubstanceList)
            setzySafetyRmInciList(data.zySafetyRmInciList)
        })
    }

    if(ingredientIdnew == 'null' || ingredientIdnew == null  || ingredientIdnew == "" || ingredientIdnew ==undefined){
            //
    }else{
        let ingredientList = []
        let ingredientCir =[];
        let tabSubjectLevel1 = []
        let tabData = []
        getIngredientSubjectTestById(ingredientIdnew).then(response=>{
                tabData = response.data.data
                tabData.map(item=>{
                    item.subjectTestRespList.forEach(i => {
                        if(tabSubjectLevel1.indexOf(i.zySafetySubjectDef.subjectLevel1Cn)===-1){
                            tabSubjectLevel1.push(i.zySafetySubjectDef.subjectLevel1Cn)
                        }
                    });
                })
                tabData[0].subjectTestRespList.map(k=>{
                    if(k.zySafetySubjectDef.subjectLevel1Cn=="CIR"){
                            if(k.zySafetyIngredientSubjectTestResult !==null){
                                ingredientCir[k.zySafetySubjectDef.subjectLevel2Cn]=k.zySafetyIngredientSubjectTestResult.resultCn
                            }else{
                                ingredientCir[k.zySafetySubjectDef.subjectLevel2Cn]=null
                            }
                        }   
                })
                console.log(tabData,'tabData')
                setnewTabData(tabData)
                const filtered = tabData.reduce((acc, item) => {  
                    const filteredItems = item.subjectTestRespList.filter(row => row.zySafetySubjectDef.subjectLevel1Cn === '毒理学终点');  
                    if (filteredItems.length > 0) {  
                      acc.push({  
                        ...item,  
                        subjectTestRespList: filteredItems,  
                      });  
                    }  
                    return acc;  
                  }, []);  
                
                  settexoData(filtered);  

                  const filtered2 = tabData.reduce((acc, item) => {  
                    const filteredItems = item.subjectTestRespList.filter(row => row.zySafetySubjectDef.subjectLevel1Cn === '法规');  
                    if (filteredItems.length > 0) {  
                      acc.push({  
                        ...item,  
                        subjectTestRespList: filteredItems,  
                      });  
                    }  
                    return acc;  
                  }, []);  
                
                  setchildrenData(filtered2); 
                // 文献
                getIngredientInfoById(ingredientIdnew).then(res=>{
                    const data=res.data.data
                    ingredientCir = {
                      ...ingredientCir, // 保留 ingredientCir 的所有属性
                      ...data,          // 添加或更新来自 data 的属性
                    };
                    ingredientList.push(ingredientCir)
                    console.log(ingredientCir,'ingredientCir')
                    setnewingredientList(ingredientList)
                    setnewremarkList(res.data.data.remarks)
                    setnewreportList(res.data.data.reports)
                })
            })
    }
  } 

  const historyTags = useHistoryTags()
  const cache = useDynamicCache()

  const submitFormCancel = () =>{
    const data = historyTags.routeDelTags(currentPage.currentName);
    cache.reset(currentPage.currentName);
    if(data) navigate(data.path)
  }

  const CustomTitleWithButton = ({ title, onClick }) => (  
    <div style={{ display: 'flex', alignItems: 'center' }}>  
      <span>{title}</span>  
      <Button style={{ marginLeft: '8px' }} onClick={submitFormCancel}>  
        {t('cancel')}  
      </Button>  
    </div>  
  ); 


  
  return (  
    <div>  
      <Row justify="space-between" align="top">  
        <Col span={5} style={{ position: 'relative' }}>  
        <div  
            style={{ 
              width:'180px', 
              position: 'fixed',  
              top:90, // 从顶部开始粘住  
              zIndex: 1, // 确保在其他内容之上  
              backgroundColor: 'white',  
              padding: '10px', // 可选内边距  
              // 可以添加maxHeight和overflowY来处理内容过多时的情况  
            }}  
          >  
          <Steps direction="vertical" current={currentStep} onChange={handleStepChange}>  
            {maodianlist.map((item, index) => (  
              <Step  key={index} title={item} />  
            ))}  
          </Steps>  
          </div>
        </Col>  
        <Col span={19}>  
          {/* 第一个Card：表单 */}  
          <Card ref={cardRef1} title={  
          <CustomTitleWithButton  
            title={maodianlist[0]}  
            onClick={submitFormCancel}  
        />  
        }>  
          <Table  
                  dataSource={zyLawInciLists} // 筛选与 subjectLevel 匹配的数据  
                  columns={columns}  
                  rowKey={(record) => record.id} // 假设每条记录都有一个唯一的id  
                  pagination={false}
                  bordered  
                  scroll={{ x: '1100px' }} // 或者使用具体的像素值，如 '1000px' 
                /> 
          </Card>  
          {/* 第二个Card：表格 */}  
          <Card title={maodianlist[1]} ref={cardRef2} style={{marginTop:'2%'}}>
          <Table  
                  dataSource={newingredientList} // 筛选与 subjectLevel 匹配的数据  
                  columns={columnsIngredientCIR}  
                  rowKey={(record) => record.id} // 假设每条记录都有一个唯一的id  
                  pagination={false}
                  bordered  
                  scroll={{ x: '1100px' }} // 或者使用具体的像素值，如 '1000px' 
                />  
          </Card>  
          {/* 第三个Card：表格（和第二个类似，但可能数据不同） */}  
          <Card title={maodianlist[2]} ref={cardRef3} style={{marginTop:'2%'}}> 
          <Tabs type="card" defaultActiveKey="通用">  
                {texoData.map((item) => (  
                    <TabPane tab={item.testLevel1Cn} key={item.testLevel1Cn}>  
                    <Table  
                        size='small' 
                        columns={columns2}  
                        dataSource={item.subjectTestRespList}  
                        pagination={false} // 如果不需要分页，可以设置为 false  
                    />  
                    </TabPane>  
                ))}  
                </Tabs> 
          </Card>  
          {/* 第四个Card：文字内容 */}  
          <Card title={maodianlist[3]} ref={cardRef4} style={{marginTop:'2%'}}>
          <Form form={form} layout="vertical">
            <Form.Item  
                name="id"  
                label="id" 
                hidden 
            >  
                <Input disabled/>  
            </Form.Item> 
            {/* 这里假设添加的内容也是一个对象，包含key和value */}  
            <Form.Item  
              name="serial"  
              label={t('inci.serial')}
            >  
              <Input disabled/>  
            </Form.Item>
            <Form.Item  
              name="inciCn"  
              label={t('inci.inciCn')}
            >  
              <Input disabled/>  
            </Form.Item>
            <Form.Item  
              name="inciUs"  
              label={t('inci.inciUs')}
            >  
              <Input disabled/>  
            </Form.Item>
            <Form.Item  
              name="maxDoseLeaveon"  
              label={t('inci.maxDoseLeaveon')}
            >  
              <Input disabled/>  
            </Form.Item>
            <Form.Item  
              name="maxDoseRinseoff"  
              label={t('inci.maxDoseRinseoff')}
            >  
              <Input disabled/>  
            </Form.Item>
            <Form.Item  
              name="comment2"  
              label={t('inci.comment2')}
            >  
              <Input disabled/>  
            </Form.Item>
            <Form.Item  
              name="comment1"  
              label={t('inci.comment1')}
            >  
              <Input disabled/>  
            </Form.Item>
           </Form>  
          </Card> 
           {/* 第五个Card：文字内容 */}  
           <Card title={maodianlist[4]} ref={cardRef5} style={{marginTop:'2%'}}>
          
           <Table  
                  dataSource={inciRisksubstanceList} // 筛选与 subjectLevel 匹配的数据  
                  columns={columnsRisk}  
                  rowKey={(record) => record.id} // 假设每条记录都有一个唯一的id  
                  pagination={false}
                  bordered  
                  scroll={{ x: '1100px' }} // 或者使用具体的像素值，如 '1000px' 
                /> 
          </Card> 
           {/* 第六个Card：文字内容 */}  
          <Card title={maodianlist[5]} ref={cardRef6} style={{marginTop:'2%'}}>
          <Tabs type="card" defaultActiveKey="通用">  
                {childrenData.map((item) => (  
                    <TabPane tab={item.testLevel1Cn} key={item.testLevel1Cn}>  
                    <Table  
                        size='small' 
                        columns={columnsChildren}  
                        dataSource={item.subjectTestRespList}  
                        pagination={false} // 如果不需要分页，可以设置为 false  
                    />  
                    </TabPane>  
                ))}  
                </Tabs> 
         
          </Card> 
          {/* 第七个Card：文字内容 */}  
          <Card title={maodianlist[6]} ref={cardRef7} style={{marginTop:'2%'}}>
          <Table  
                  dataSource={newreportList} // 筛选与 subjectLevel 匹配的数据  
                  columns={columnsReport}  
                  rowKey={(record) => record.id} // 假设每条记录都有一个唯一的id  
                  pagination={false}
                  bordered  
                  scroll={{ x: '1100px' }} // 或者使用具体的像素值，如 '1000px' 
                />
         
          </Card> 
          {/* 第八个Card：文字内容 */}  
          <Card title={maodianlist[7]} ref={cardRef8} style={{marginTop:'2%'}}>
          <Table  
                  dataSource={newremarkList} // 筛选与 subjectLevel 匹配的数据  
                  columns={columnsRemark}  
                  rowKey={(record) => record.id} // 假设每条记录都有一个唯一的id  
                  pagination={false}
                  bordered  
                  scroll={{ x: '1100px' }} // 或者使用具体的像素值，如 '1000px' 
                />
         
          </Card> 
          {/* 第九个Card：文字内容 */}  
          <Card title={maodianlist[8]} ref={cardRef9} style={{marginTop:'2%'}}>
          <Table  
                  dataSource={zySafetyRmInciList} // 筛选与 subjectLevel 匹配的数据  
                  columns={columnsRM}  
                  rowKey={(record) => record.id} // 假设每条记录都有一个唯一的id  
                  pagination={false}
                  bordered  
                  scroll={{ x: '1100px' }} // 或者使用具体的像素值，如 '1000px' 
                /> 
         
          </Card> 
          {/* 在这里放置保存按钮 */}  
          <div style={{ textAlign: 'left', marginTop: '16px' }}>  
                 
                <Button  onClick={() => { submitFormCancel() }}>  
                  {t('cancel')}  
                </Button> 
           </div>     
        </Col>  
      </Row> 


    </div>  
  );  
};  
  
export default viewsearchList;